<template>
  <div class="dog-detail-container">
    <div class="dog-detail" v-if="displayData.id">
      <el-row :gutter="30">
        <el-col :span="24">
          <div class="image-section">
            <!-- 头像展示/上传 -->
            <div class="avatar-display-wrapper">
              <div class="avatar-display" :class="{ 'is-editable': editMode }" @click="editMode && selectImage('avatar_url')">
                <div class="aspect-ratio-box aspect-ratio-1-1">
                  <img
                    v-if="getAvatarImage()"
                    :src="$transformImageUrl(getAvatarImage())"
                    :alt="displayData.breed + '头像'"
                    class="avatar-image"
                    @load="onImageLoad"
                    @error="onImageError" />
                  <div v-else class="upload-placeholder">
                    <i class="el-icon-user"></i>
                    <p>{{ editMode ? '上传头像' : '未添加' }}</p>
                  </div>
                  <div class="image-loading" v-if="imageLoading">
                    <i class="el-icon-loading"></i>
                  </div>
                  <div class="image-overlay" v-if="editMode && getAvatarImage()">
                    <el-button
                      type="danger"
                      icon="el-icon-delete"
                      size="mini"
                      circle
                      @click.stop="removeImage('avatar_url')">
                    </el-button>
                  </div>
                </div>
              </div>
              <input
                ref="fileInputAvatar"
                type="file"
                accept="image/*"
                @change="handleImageUpload($event, 'avatar_url')"
                style="display: none;">
            </div>

            <!-- 生活场景图片展示/上传 -->
            <div class="scene-upload-section">
              <h4>生活场景图片</h4>
              <div class="scene-images-grid">
                <div v-for="(imageInfo, index) in getSceneImages()" :key="index" class="scene-image-item" :class="{ 'is-editable': editMode }" @click="editMode && selectImage(imageInfo.key)">
                  <div class="aspect-ratio-box aspect-ratio-4-3">
                    <img
                      v-if="imageInfo.hasImage"
                      :src="$transformImageUrl(imageInfo.url)"
                      :alt="imageInfo.label"
                      class="scene-image"
                      @load="onImageLoad"
                      @error="onImageError" />
                    <div v-else class="upload-placeholder">
                      <i :class="imageScenes[imageInfo.key].icon"></i>
                      <p>{{ editMode ? imageScenes[imageInfo.key].placeholder : '未添加' }}</p>
                    </div>
                    <div class="image-loading" v-if="imageLoading">
                      <i class="el-icon-loading"></i>
                    </div>
                    <div class="image-overlay" v-if="editMode && imageInfo.hasImage">
                      <el-button
                        type="danger"
                        icon="el-icon-delete"
                        size="mini"
                        circle
                        @click.stop="removeImage(imageInfo.key)">
                      </el-button>
                    </div>
                  </div>
                  <div class="scene-image-label">{{ imageInfo.label }}</div>
                  <input
                    :ref="`fileInput${imageInfo.key.replace('_url', '').charAt(0).toUpperCase() + imageInfo.key.replace('_url', '').slice(1)}`"
                    type="file"
                    accept="image/*"
                    @change="handleImageUpload($event, imageInfo.key)"
                    style="display: none;">
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>

      <!-- 基本信息 (移动到图片下方) -->
      <div class="basic-info-section">
        <div class="basic-info">
          <div class="title-section">
            <h1>{{ displayData.breed }}</h1>
            <h2 class="breed-en">{{ displayData.breedEn }}</h2>
            <el-button
              type="primary"
              size="small"
              @click="toggleEditMode"
              :loading="loading">
              {{ editMode ? '取消编辑' : '编辑品种' }}
            </el-button>
          </div>
          
          <el-row :gutter="20" class="info-grid">
            <el-col :span="12">
              <div class="info-item">
                <span class="label">原产国:</span>
                <span class="value">{{ displayData.originCountry }}</span>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="info-item">
                <span class="label">分布区域:</span>
                <span class="value">{{ displayData.distributionArea }}</span>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="info-item">
                <span class="label">犬种分组:</span>
                <span class="value">{{ displayData.groupType }}</span>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="info-item">
                <span class="label">寿命:</span>
                <span class="value">{{ displayData.lifeSpan }}</span>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="info-item">
                <span class="label">体重:</span>
                <span class="value">{{ displayData.weightMin }}-{{ displayData.weightMax }}kg</span>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="info-item">
                <span class="label">身高:</span>
                <span class="value">{{ displayData.heightMin }}-{{ displayData.heightMax }}cm</span>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="info-item">
                <span class="label">毛发类型:</span>
                <span class="value">{{ displayData.coatType }}</span>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="info-item">
                <span class="label">毛色:</span>
                <span class="value">{{ displayData.coatColor }}</span>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="info-item">
                <span class="label">价格范围:</span>
                <span class="value">{{ displayData.priceRange }}</span>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="info-item">
                <span class="label">受欢迎程度:</span>
                <span class="value">第{{ displayData.popularityRank }}名</span>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
      
      <!-- 性格特征 -->
      <el-row class="section">
        <el-col :span="24">
          <h3><i class="el-icon-user"></i> 性格特征</h3>
          <p class="description">{{ displayData.temperament }}</p>
        </el-col>
      </el-row>
      
      <!-- 评分雷达图 -->
      <el-row :gutter="30" class="section">
        <el-col :span="12">
          <h3><i class="el-icon-data-analysis"></i> 能力评分</h3>
          <div class="rating-grid">
            <div class="rating-item">
              <span class="rating-label">好养度:</span>
              <el-rate :value="displayData.careDifficulty" disabled show-score text-color="#ff9900"></el-rate>
            </div>
            <div class="rating-item">
              <span class="rating-label">运动需求:</span>
              <el-rate :value="displayData.exerciseNeeds" disabled show-score text-color="#ff9900"></el-rate>
            </div>
            <div class="rating-item">
              <span class="rating-label">美容需求:</span>
              <el-rate :value="displayData.groomingNeeds" disabled show-score text-color="#ff9900"></el-rate>
            </div>
            <div class="rating-item">
              <span class="rating-label">训练难度:</span>
              <el-rate :value="displayData.trainingDifficulty" disabled show-score text-color="#ff9900"></el-rate>
            </div>
            <div class="rating-item">
              <span class="rating-label">吠叫程度:</span>
              <el-rate :value="displayData.barkingLevel" disabled show-score text-color="#ff9900"></el-rate>
            </div>
          </div>
        </el-col>
        
        <el-col :span="12">
          <h3><i class="el-icon-check"></i> 适应性</h3>
          <div class="adaptability">
            <div class="adapt-item">
              <span class="adapt-label">适合儿童:</span>
              <el-tag :type="displayData.goodWithChildren ? 'success' : 'danger'">
                {{ displayData.goodWithChildren ? '是' : '否' }}
              </el-tag>
            </div>
            <div class="adapt-item">
              <span class="adapt-label">适合其他宠物:</span>
              <el-tag :type="displayData.goodWithPets ? 'success' : 'danger'">
                {{ displayData.goodWithPets ? '是' : '否' }}
              </el-tag>
            </div>
            <div class="adapt-item">
              <span class="adapt-label">适合公寓:</span>
              <el-tag :type="displayData.apartmentFriendly ? 'success' : 'danger'">
                {{ displayData.apartmentFriendly ? '是' : '否' }}
              </el-tag>
            </div>
          </div>
        </el-col>
      </el-row>
      
      <!-- 特点描述 -->
      <el-row class="section">
        <el-col :span="24">
          <h3><i class="el-icon-star-on"></i> 品种特点</h3>
          <p class="description">{{ displayData.characteristics }}</p>
        </el-col>
      </el-row>

      <!-- 生活习性 -->
      <el-row class="section">
        <el-col :span="24">
          <h3><i class="el-icon-house"></i> 生活习性</h3>
          <p class="description">{{ displayData.habits }}</p>
        </el-col>
      </el-row>

      <!-- 健康信息 -->
      <el-row :gutter="30" class="section">
        <el-col :span="12">
          <h3><i class="el-icon-warning"></i> 常见健康问题</h3>
          <p class="description">{{ displayData.healthIssues || '暂无相关信息' }}</p>
        </el-col>

        <el-col :span="12">
          <h3><i class="el-icon-info"></i> 特殊注意事项</h3>
          <p class="description">{{ displayData.specialNotes || '暂无特殊注意事项' }}</p>
        </el-col>
      </el-row>
    </div>
    
    <div class="detail-footer">
      <el-button v-if="!editMode" type="primary" @click="toggleEditMode">编辑品种</el-button>
      <el-button v-if="editMode" @click="toggleEditMode">取消编辑</el-button>
      <el-button v-if="editMode" type="primary" @click="saveChanges" :loading="saving">保存更改</el-button>
    </div>
  </div>
</template>

<script>
import DogService from '@/api/dogService.js'

export default {
  name: 'DogDetail',
  props: {
    dogId: {
      type: [Number, String],
      required: true
    }
  },
  data() {
    return {
      loading: false,
      saving: false,
      editMode: false,
      detailData: {},
      imageLoading: false,
      editImages: {
        avatar_url: '',
        standing_url: '',
        playing_url: '',
        eating_url: '',
        sleeping_url: '',
        resting_url: '',
        lying_down_url: '',
        waiting_url: '',
        stretching_url: '',
        head_tilting_url: '',
        rolling_over_url: '',
        sad_url: ''
      },
      uploadingIndex: -1,
      imageScenes: {
        standing_url: {
          label: '站立姿态',
          placeholder: '上传站立图片',
          icon: 'el-icon-user'
        },
        playing_url: {
          label: '玩耍场景',
          placeholder: '上传玩耍图片',
          icon: 'el-icon-football'
        },
        eating_url: {
          label: '进食场景',
          placeholder: '上传进食图片',
          icon: 'el-icon-food'
        },
        sleeping_url: {
          label: '睡觉场景',
          placeholder: '上传睡觉图片',
          icon: 'el-icon-moon'
        },
        resting_url: {
          label: '休息状态',
          placeholder: '上传休息图片',
          icon: 'el-icon-coffee-cup'
        },
        lying_down_url: {
          label: '躺下姿态',
          placeholder: '上传躺下图片',
          icon: 'el-icon-bottom'
        },
        waiting_url: {
          label: '等待状态',
          placeholder: '上传等待图片',
          icon: 'el-icon-time'
        },
        stretching_url: {
          label: '伸展动作',
          placeholder: '上传伸展图片',
          icon: 'el-icon-top'
        },
        head_tilting_url: {
          label: '歪头动作',
          placeholder: '上传歪头图片',
          icon: 'el-icon-question'
        },
        rolling_over_url: {
          label: '翻滚动作',
          placeholder: '上传翻滚图片',
          icon: 'el-icon-refresh'
        },
        sad_url: {
          label: '伤心表情',
          placeholder: '上传伤心图片',
          icon: 'el-icon-remove'
        }
      }
    }
  },
  computed: {
    // 统一的数据源，直接使用详情数据
    displayData() {
      return this.detailData
    }
  },
  watch: {
    dogId: {
      handler(newId) {
        if (newId) {
          this.loadDetailData(newId)
        }
      },
      immediate: true
    }
  },
  methods: {
    // 加载完整的详情数据
    async loadDetailData(id) {
      if (!id) return

      this.loading = true
      try {
        const result = await DogService.getBreedDetail(id)
        if (result.success) {
          this.detailData = result.data
          // 确保detailData.images存储的是原始URL，用于编辑和保存
          // 模板中的图片显示会单独进行transformImageUrl转换
          if (!this.detailData.images) {
            this.detailData.images = {}
          }
          // 初始化编辑图片对象
          this.editImages = {
            avatar_url: this.detailData.images?.avatar_url || '',
            standing_url: this.detailData.images?.standing_url || '',
            playing_url: this.detailData.images?.playing_url || '',
            eating_url: this.detailData.images?.eating_url || '',
            sleeping_url: this.detailData.images?.sleeping_url || '',
            resting_url: this.detailData.images?.resting_url || '',
            lying_down_url: this.detailData.images?.lying_down_url || '',
            waiting_url: this.detailData.images?.waiting_url || '',
            stretching_url: this.detailData.images?.stretching_url || '',
            head_tilting_url: this.detailData.images?.head_tilting_url || '',
            rolling_over_url: this.detailData.images?.rolling_over_url || '',
            sad_url: this.detailData.images?.sad_url || ''
          }
        } else {
          this.$message.error(result.message || '获取详情失败')
          this.detailData = {} // Clear detailData on error
        }
      } catch (error) {
        this.$message.error('获取详情失败：' + error.message)
        this.detailData = {} // Clear detailData on error
      } finally {
        this.loading = false
      }
    },

    // 获取场景图片信息
    getSceneImages() {
      const images = []
      // 在编辑模式下使用 editImages，否则使用 displayData.images
      const sourceImages = this.editMode ? this.editImages : (this.displayData.images || {})
      
      Object.keys(this.imageScenes).forEach(key => {
        const imageUrl = sourceImages[key]
        images.push({
          url: imageUrl,
          label: this.imageScenes[key].label,
          hasImage: !!imageUrl,
          key: key
        })
      })

      return images
    },

    // 获取头像图片
    getAvatarImage() {
      // 在编辑模式下使用 editImages，否则使用 displayData.images
      return this.editMode ? (this.editImages?.avatar_url || null) : (this.displayData.images?.avatar_url || null)
    },

    // 切换编辑模式
    toggleEditMode() {
      this.editMode = !this.editMode
      if (this.editMode) {
        // 进入编辑模式时，重新初始化编辑图片对象，确保存储的是原始URL
        this.editImages = {
          avatar_url: this.detailData.images?.avatar_url || '',
          standing_url: this.detailData.images?.standing_url || '',
          playing_url: this.detailData.images?.playing_url || '',
          eating_url: this.detailData.images?.eating_url || '',
          sleeping_url: this.detailData.images?.sleeping_url || '',
          resting_url: this.detailData.images?.resting_url || '',
          lying_down_url: this.detailData.images?.lying_down_url || '',
          waiting_url: this.detailData.images?.waiting_url || '',
          stretching_url: this.detailData.images?.stretching_url || '',
          head_tilting_url: this.detailData.images?.head_tilting_url || '',
          rolling_over_url: this.detailData.images?.rolling_over_url || '',
          sad_url: this.detailData.images?.sad_url || ''
        }
      }
    },

    // 选择图片
    selectImage(imageType) {
      if (imageType === 'avatar_url') {
        this.$refs.fileInputAvatar.click()
      } else {
        const refName = `fileInput${imageType.charAt(0).toUpperCase() + imageType.slice(1).replace('_url', '')}`
        this.$refs[refName] && this.$refs[refName][0] && this.$refs[refName][0].click()
      }
    },

    // 处理图片上传
    async handleImageUpload(event, imageType) {
      const file = event.target.files[0]
      if (!file) return

      this.uploadingIndex = imageType
      try {
        const result = await DogService.uploadImage(file)
        if (result.success) {
          this.$set(this.editImages, imageType, result.data.url)
          this.$message.success(`${this.getImageTypeLabel(imageType)}上传成功`)
        } else {
          this.$message.error(result.message || '图片上传失败')
        }
      } catch (error) {
        this.$message.error('图片上传失败：' + error.message)
      } finally {
        this.uploadingIndex = -1
        // 清空文件选择
        event.target.value = ''
      }
    },

    // 移除图片
    removeImage(imageType) {
      this.$set(this.editImages, imageType, '')
    },

    // 获取图片类型标签
    getImageTypeLabel(imageType) {
      if (imageType === 'avatar_url') return '头像'
      return this.imageScenes[imageType]?.label || '图片'
    },

    // 保存更改
    async saveChanges() {
      this.saving = true
      try {
        // 准备更新数据
        const updateData = {
          images: {
            avatar_url: this.editImages.avatar_url || null,
            standing_url: this.editImages.standing_url || null,
            playing_url: this.editImages.playing_url || null,
            eating_url: this.editImages.eating_url || null,
            sleeping_url: this.editImages.sleeping_url || null,
            resting_url: this.editImages.resting_url || null,
            lying_down_url: this.editImages.lying_down_url || null,
            waiting_url: this.editImages.waiting_url || null,
            stretching_url: this.editImages.stretching_url || null,
            head_tilting_url: this.editImages.head_tilting_url || null,
            rolling_over_url: this.editImages.rolling_over_url || null,
            sad_url: this.editImages.sad_url || null
          }
        }

        const result = await DogService.updateBreed(this.displayData.id, updateData)
        if (result.success) {
          this.$message.success('保存成功')
          this.editMode = false
          // 重新加载详情数据
          await this.loadDetailData(this.dogId)
          // 通知父组件刷新列表
          this.$emit('refresh-list')
        } else {
          this.$message.error(result.message || '保存失败')
        }
      } catch (error) {
        this.$message.error('保存失败：' + error.message)
      } finally {
        this.saving = false
      }
    },

    // 图片加载成功
    onImageLoad() {
      this.imageLoading = false
    },

    // 图片加载失败
    onImageError(event) {
      this.imageLoading = false
      console.warn('图片加载失败:', event.target.src)
      // 可以设置默认图片
    }
  }
}
</script>

<style scoped>
.dog-detail-container {
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.dog-detail {
  padding: 0; /* Remove padding as it's now on the container */
}

.image-section {
  margin-bottom: 20px;
}

.detail-image {
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: 8px;
}

.title-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.title-section h1 {
  margin: 0;
  flex: 1;
}

.title-section h2 {
  margin: 0 20px 0 0;
  color: #666;
  font-style: italic;
  font-size: 18px;
}

/* 图片展示/上传相关样式 */
.avatar-display-wrapper {
  text-align: center;
  margin-bottom: 30px;
}

.avatar-display {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 auto;
  border-radius: 50%;
  overflow: hidden;
  background-color: #f9f9f9;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.avatar-display.is-editable {
  cursor: pointer;
  border: 2px dashed #d1d5db;
}

.avatar-display.is-editable:hover {
  border-color: #409eff;
  background-color: #f0f9ff;
}

.avatar-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #e4e7ed;
}

.scene-upload-section {
  margin-top: 20px;
}

.scene-upload-section h4 {
  margin: 0 0 15px 0;
  color: #303133;
  font-size: 16px;
  font-weight: 600;
}

.scene-image-item {
  position: relative;
  text-align: center;
  background: white;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
}

.scene-image-item.is-editable {
  cursor: pointer;
  border: 2px dashed #d1d5db;
}

.scene-image-item.is-editable:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  border-color: #409eff;
  background-color: #f0f9ff;
}

.scene-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  border: 2px solid #e4e7ed;
}

.upload-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #909399;
  font-size: 14px;
}

.upload-placeholder i {
  font-size: 32px;
  color: #c0c4cc;
  margin-bottom: 8px;
}

.upload-placeholder p {
  margin: 0;
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s;
}

.avatar-display:hover .image-overlay,
.scene-image-item:hover .image-overlay {
  opacity: 1;
}

.scene-images-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr); /* Display 6 columns for wider display */
  grid-gap: 10px; /* Adjusted gap for more items */
  margin-top: 24px;
}

.scene-image-item {
  text-align: center;
  background: white;
  border-radius: 12px;
  padding: 10px; /* Adjusted padding for smaller items */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.scene-image-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.scene-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  border: 2px solid #e4e7ed;
}

.scene-image-label {
  margin-top: 8px; /* Adjusted margin */
  font-size: 14px; /* Adjusted font size */
  color: #303133;
  font-weight: 600;
  background: #f5f7fa;
  padding: 6px 10px; /* Adjusted padding */
  border-radius: 6px;
  display: inline-block;
}

/* 图片加载状态 */
.image-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #409eff;
}

/* 响应式设计 */
@media (max-width: 1200px) { /* Added a breakpoint for 5 columns */
  .scene-images-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media (max-width: 1024px) {
  .scene-images-grid {
    grid-template-columns: repeat(4, 1fr); /* 4 columns on medium screens */
  }
}

@media (max-width: 768px) {
  .scene-images-grid {
    grid-template-columns: repeat(3, 1fr); /* 3 columns on smaller screens */
    grid-gap: 10px;
  }
}

@media (max-width: 480px) {
  .scene-images-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 columns on very small screens */
    grid-gap: 8px;
  }
}

.basic-info h1 {
  margin: 0 0 10px 0;
  color: #333;
  font-size: 28px;
}

.info-grid {
  margin-top: 20px;
}

.info-item {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}

.label {
  font-weight: bold;
  color: #333;
  min-width: 80px;
  margin-right: 10px;
}

.value {
  color: #666;
}

.section {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #eee;
}

.section h3 {
  color: #409EFF;
  margin-bottom: 15px;
  font-size: 18px;
}

.section h3 i {
  margin-right: 8px;
}

.description {
  color: #666;
  line-height: 1.6;
  margin: 0;
  font-size: 14px;
}

.rating-grid {
  margin-top: 10px;
}

.rating-item {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}

.rating-label {
  font-weight: bold;
  color: #333;
  min-width: 80px;
  margin-right: 10px;
}

.adaptability {
  margin-top: 10px;
}

.adapt-item {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}

.adapt-label {
  font-weight: bold;
  color: #333;
  min-width: 120px;
  margin-right: 10px;
}

.detail-footer {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #eee;
  text-align: right;
}

/* Aspect Ratio Box styles */
.aspect-ratio-box {
  position: relative;
  width: 100%;
  height: 0;
  overflow: hidden;
}

.aspect-ratio-1-1 {
  padding-bottom: 100%; /* 1:1 Aspect Ratio */
}

.aspect-ratio-4-3 {
  padding-bottom: 75%; /* 4:3 Aspect Ratio */
}
</style>
